<template>
    <div :class="[animation ? 'skeleton-active' : '', `skeleton-type-${type}`]" class="skeleton">
        <div v-if="type === 'default'" class="skeleton-content">
            <div v-for="(item, index) in new Array(length)" :key="index" class="skeleton-item">
                <div class="skeleton-goods-img viewEmpty_IconBox">
                    <i class="el-icon-goods skeleton-goods-img-icon"></i>
                </div>
                <h3 class="skeleton-title" style="width: 100%; height: 32px;"></h3>
                <ul class="skeleton-paragraph">
                    <li v-for="(innerItem, itemIndex) in new Array(itemLength)" :key="itemIndex" style="width: 61%;"></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SkeletonGoods',
    props: {
        type: {
            type: String,
            default: 'default' // default / img
        },
        length: {
            type: Number,
            default: 1
        },
        animation: {
            type: Boolean,
            default: true
        },
        itemLength: {
            type: Number,
            default: 1
        }
    }
};
</script>

<style lang="scss" scoped>
    @import "skeleton";
</style>
